<template>
  <div class="app-container">
    <el-card>
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px">
        <title-line title="添加邮箱" />
        <el-form-item label="邮箱地址" prop="email">
          <el-input
            style="width: 350px"
            v-model="formData.email"
            placeholder="请输入邮箱地址"
            clearable
          />
        </el-form-item>
        <el-form-item label="导出模块" prop="types">
          <el-checkbox-group v-model="formData.types">
            <el-checkbox v-for="(item, index) in EXPORT_MODULE" :key="index" :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            class="textareaClass"
            v-model="formData.remark"
          ></el-input>
        </el-form-item>
        <el-form-item class="mt-20" style="text-align: center">
          <el-button @click="resetForm"> 取消 </el-button>
          <el-button type="primary" @click="submitForm"> 保存 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { EXPORT_MODULE } from '@/enum/setting'
export default {
  name: 'addEmail',
  data() {
    return {
      formData: {
        email: '',
        types: [],
        remark: ''
      },
      rules: {
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: 'blur'
          },
          {
            pattern:
              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: '请输入正确格式的邮箱'
          }
        ],
        types: [
          {
            required: true,
            message: '请选择导出模块',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {
    EXPORT_MODULE() {
      return EXPORT_MODULE
    }
  },

  created() {
    const { type } = this.$route.query
    if (type === 'edit') this.handleDetails()
  },

  methods: {
    //获取邮箱详情
    async handleDetails() {
      const { id } = this.$route.query
      const { data, status } = await this.$http.system.message.getEmailInfo({ id })
      if (status === 200) {
        this.formData = { ...this.formData, ...data }
      }
    },
    resetForm() {
      this.$refs.elForm.clearValidate()
      this.$router.go(-1)
    },
    submitForm() {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        const { type } = this.$route.query
        if (type === 'add') {
          this.handleAdd()
        } else {
          this.handleEdit()
        }
      })
    },
    //新增
    async handleAdd() {
      const { status, msg } = await this.$http.system.message.saveExportEmail(this.formData)
      if (status == 200) {
        this.$message.success('新增成功')
        this.resetForm()
      } else {
        this.$message.error(msg)
      }
    },

    //编辑
    async handleEdit() {
      const { status, msg } = await this.$http.system.message.updateExportEmail(this.formData)
      if (status == 200) {
        this.$message.success('修改成功')
        this.resetForm()
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.textareaClass {
  height: 100px;
  width: 350px;
}
</style>
